<!--1.组件有哪些元素、标签 -->
<template>
  <div>
    <p>商品详情页</p>
    <p>{{ name }}</p>
    <p>{{ price }}</p>
    <p>{{ num }}</p>
    <button @click="pay()">立即购买</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "图书",
      price: 50,
      num: 5,
    };
  },
  methods: {
    pay: function () {
      alert(this.name);
    },
  },
};
</script>
<!-- scoped :表示style只对当前组件有效 -->
<style scoped>
p {
  color: red;
}
</style>